<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../js/dropdown/dropdown.css">
				
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		<link rel="stylesheet" href="../../js/datepicker/datepicker.css">
		
		
	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>
						
					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">
				
				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row" style="height: 30px;">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="../index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>商品物料</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- FORMS QUERY-->
							<div class="row">
								<div class="col-md-12">
									<div class="row">
										<div class="col-md-12">
											<div class="box border primary">
												<div class="box-title">
													<h4><i class="fa fa-bars"></i>查询条件</h4>
												</div>
												<div class="box-body big" style="padding:10px;">
													<form class="form-horizontal" role="form" id="form_material">
														<div class="form-group mrg-bt10">
															<label class="col-sm-1 control-label" style="width: auto">批次Id：</label>
															<div class="col-sm-2">
																<input type="text" class="form-control" name="batchId" placeholder="输入关键字">
															</div>
															<label class="col-sm-1 control-label" style="width: auto">合同编号：</label>
															<div class="col-sm-2">
																<input type="text" class="form-control" name="contractCode" placeholder="输入关键字">
															</div>
															<div class="col-sm-1">
																<a class="btn btn-primary search">查询</a>
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- /FORMS QUERY -->
							<div class="row" style="height: 30px;">
								<div class="col-md-12">
									<div class="box ">
									<a class="btn btn-success" href="import_material_detail.html">
											<i class="fa  fa-plus-square-o"></i> 导入明细
										</a>
										<a class="btn btn-warning  exportDetail">
											<i class="fa  fa-plus-square-o"></i> 导出明细
										</a>
										
									</div>
								</div>
							</div>

							<div class="row">
								<!-- TABLES -->
								<div class="col-md-12">
									<!-- BOX -->
									<div class="box border primary">
										<div class="box-title">
											<h4><i class="fa fa-table"></i>明细数：<span id="total"></span>条 </h4>

										</div>
										<div class="box-body">
											<table id="db_group_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
												
											</table>
										</div>
									</div>
									<!-- /BOX -->
								</div>
							</div>
							<!-- /TABLES -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
			<input type="hidden" name="groupId" />
		</section>

		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->
		<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<!-- JQUERY UI-->
		<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
	
		<!-- INPUT MASK -->
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
		<!-- UNIFORM -->
		<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>

		
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- DATA TABLES -->
			<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
				<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
		<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>
		<script src="../../js/common.js"></script>
		<script>

		var Materiel=function(){			
			var $mainDataTable=null;
			
				
		
       var searchMateriel = function() {
          var url=App.getContextPath()+"admin/material/searchMaterialDetail.do?batchId="+$("input[name=batchId]").val()+"&contractCode="+$("input[name=contractCode]").val();
	
		var dtSetting = $.dataTableSetting({					
					"ajaxSource" :url,
					"serverSide" : true,
					"bFilter" : false,// 去掉搜索框
					"bLengthChange" : false,// 每页显示数量	
						
					"sScrollX":"100%",
					"sScrollXInner": "100%",
					"iDisplayLength": 10,
					
					"bSort" : false,					
					"aoColumns" : [ 
					                {
						"mDataProp" : "batchId",
						"sTitle" : "批次Id",
						"width" : "10%"				
					},{
						"mDataProp" : "contractCode",
						"sTitle" : "合同编号",
						"width" : "10%"				
					}, {
						"mDataProp" : "skuCode",
						"sTitle" : "SKU编码",
						"width" : "10%"		
					}, {
						"mDataProp" : "productName",
						"sTitle" : "产品名称",
						"width" : "10%"		
					}, {
						"mDataProp" : "careLableAmount",
						"sTitle" : "洗标数量",
						"width" : "10%"		
					}, {
						"mDataProp" : "careLablePrice",
						"sTitle" : "洗标单价",
						"width" : "10%"		
					}, {
						"mDataProp" : "barAmount",
						"sTitle" : "贴纸数量",
						"width" : "10%"		
					}, {
						"mDataProp" : "barPrice",
						"sTitle" : "贴纸单价",
						"width" : "10%"		
					}, {
						"mDataProp" : "stickerAmount",
						"sTitle" : "彩贴数量",
						"width" : "10%"
						
					}, {
						"mDataProp" : "stickerPrice",
						"sTitle" : "彩贴单价",
						"width" : "10%"
						
					}]
				});
			
		 $mainDataTable = $("#db_group_list").dataTable(dtSetting);
	 }
	 
	 return {
	  init:function(){
	     
	     searchMateriel();
	    $(".search").click(searchMateriel);
	    $(".exportDetail").click(function(){
	    	$("#form_material").attr("action","../../admin/material/exportMaterialDetail.do");
	    	$("#form_material").submit();
	    })
	    $(".exportTotal").click(function(){
	    	$("#form_material").attr("action","../../admin/material/exportMaterialTotal.do");
	    	$("#form_material").submit();
	    })
	   
		
	  }
	 
	 }
	 }();
	 
	 $(function(){
	   $("#header").load("../head.html");
	   App.init();
	   Materiel.init();
	    
	 });
		
		</script>
		<!-- /JAVASCRIPTS -->
	</body>

</html>